<template>
  <div>
    <!-- AddProduce.vue -->
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="条形码：">
        <el-radio-group v-model="form.resource">
          <el-radio label="有条形码"></el-radio>
          <el-radio label="无条形码"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-input style="width:180px" v-model="form.name" placeholder="请输入商品条形码"></el-input>
      </el-form-item>



      <el-form-item label="展示分类：">
        <!-- <el-button type="primary" @click="onShow">快速分类</el-button> -->
        <div class="block">

          <el-cascader ref="cos" @change="handleChange" filterable v-if="cateList.length"
            :props="{ label: 'catename', value: 'id' }" :options="cateList" clearable>
          </el-cascader>
        </div>
      </el-form-item>

      <el-form-item label="商品名称：">
        <el-input style="width:180px" v-model="form.productName" placeholder=""></el-input>
      </el-form-item>
      <!-- <p>{{ fileList }}</p> -->
      <el-form-item prop="gallery" v-model="form.gallery" label="商品图片：">
        <el-upload 
        
        :limit="5" 
        ref="inimg"
        :on-change="handleChange"
        :file-list="fileList"
          action="http://dida100.com:8888/api/file/upload" list-type="picture-card"
          :on-preview="handlePictureCardPreview" 
          :on-remove="handleRemove">
           <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
       
        <span
         
          class="el-upload-list__item-delete"
          @click="handleRemove(file,fileList)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>

        </el-upload>


        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>



        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="商品编码：">
        <el-input style="width:180px" v-model="form.name" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="是否统一上架：">
        <el-switch v-model="form.delivery1"></el-switch>
      </el-form-item>

      <el-form-item label="商品库存：">
        <el-input style="width:180px" v-model="form.name" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="正常价格：">
        <el-input style="width:180px" v-model="form.price" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="市场价：">
        <el-input style="width:180px" v-model="form.originalPrice" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="默认佣金比例：">
        <el-input style="width:180px" v-model="form.name" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="商品标签：">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="无" value="1"></el-option>
          <el-option label="爆款" value="2"></el-option>
          <el-option label="网红" value="3"></el-option>
          <el-option label="新品" value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="*储藏条件：">
        <el-select v-model="form.region1" placeholder="请选择活动区域">

          <el-option label="常温" value="1"></el-option>
          <el-option label="冷藏" value="2"></el-option>
          <el-option label="冷冻" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="规格">
        <el-input style="width:180px" v-model="form.specs" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="单位：">
        <el-input style="width:180px" v-model="form.price" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="品牌：">
        <el-input style="width:180px" v-model="form.brand" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="产地：">
        <el-input style="width:180px" v-model="form.origin" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="服务支持项：">
        <el-select v-model="form.region2" placeholder="服务支持项：">
          <el-option label="无" value="1"></el-option>
          <el-option label="有" value="2"></el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="商品简介 ">
        可描述商品卖点，简介内容将在用户端商品列表处展示
        <el-input type="textarea" placeholder="" v-model="form.descript"></el-input>
      </el-form-item>
      <el-form-item label="图文详情 " >
        可介绍商品亮点、特写图片等内容，便于顾客更好的了解商品。
        <main id="sample" style="width:100%">
          <Editor api-key="no-api-key"
          
          :init="{
            
            language:'zh_CN',
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount,'
          ],
          toolbar: 'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat |image| code help',
        height: 650, //编辑器高度
        min_height: 400,       
        images_upload_handler:upImg,//上传图片的处理器
        
      }"
           />
        </main>
      </el-form-item>

      <el-form-item>
        <el-button @click="sureEditProduct()">确定 </el-button>
        <el-button @click="noEditProduct()">取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { GetCate, AddProduct,UpdateProduct ,GetProductById } from '@/api/product'
// import { UpLoadImg } from "@/api/img";
import Editor from '@tinymce/tinymce-vue'
export default {
  components: {
    Editor
  },
  data() {
    return {
      id:this.$route.params.id,
      ProductByIdList:[],
      cateList: [],
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        productName: '',
        originalPrice: '',
        specs: '',
        price: '',
        descript: '',
        gallery: "",
        brand: '',
        origin: "",
        name: '',
        region: '1',
        region1: '1',
        region2: '1',
        date1: '',
        date2: '',
        delivery: false,
        delivery1: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  created() {
    GetCate().then(res => {
      this.cateList = res.data.list;
      // console.log(res, this.cateList);
    })
   
    GetProductById(this.id).then(res=>{
      
      this.ProductByIdList = res.data.data
      this.form = res.data.data[0]
      
    })
  },
  methods: {
    sureEditProduct(){
      UpdateProduct({...this.form,id:this.id}).then(res=>{
        console.log(res,'sureEditProduct');
        alert('修改成功')
      })
    },
    handleChange(file, fileList){
        console.log(file,fileList)
      this.fileList = [...fileList]
      console.log({...file});
      console.log({...file}.response);
      var imgobj = {...file}.response
     var img = {...imgobj}.file
     console.log({...img}.path);
    this.form.gallery ='http://dida100.com:8888' +{...img}.path
     //{...file}.name
    },
    //删除删除
    handleRemove(file,fileList) {
       
        console.log(file,fileList,"scope")
        var ind = this.fileList.findIndex(item=>item.response.file.path==file.response.file.path)
        this.fileList.splice(ind,1);
       
    },

    addProduct() {
      var list = this.fileList.map(item => 'http://dida100.com:8888' + item.response.file.path)
     console.log(list);
      this.form.gallery = list.join('|');
      console.log(this.form.gallery+'1', '@change="uploadImg" ');

      AddProduct(this.form)
        .then(res => {
          console.log(res);
        })
    },
  

    handlePictureCardPreview(file) {
      console.log(file);
      this.form.gallery=file.response.file.path
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onShow() {
      console.log('onShow!');

    }
  }
}
</script>
<style>
@media (min-width: 1324px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1200px;
  }
}
</style>